//################################
// 版权所有：中国农业银行软件开发中心
// 系统名称：移动办公应用-手机版
// 文件名称：MenuModal.js
// 创建时间：2016年08月16日
// 创建人员：Panda
// 功能说明：公文菜单弹出式菜单
//################################

'use strict';

import React, {Component} from 'react';
import PubSub from 'pubsub-js';
import {
    View,
    TouchableOpacity,
    Text,
    StyleSheet,
    Dimensions,
} from 'react-native';
import {
    UIConstants,
    Colors,
    PubSubTopics,
    FontSizes,
} from '../../common';

import Modal from '../../components/modal';

const WINDOW_WIDTH = Dimensions.get('window').width;
const WINDOW_HEIGHT = Dimensions.get('window').height;

class MenuModal extends Component {
    constructor(props) {
        super(props);

        this.menus = [];
        
        this.state = {
            isOpen: false,
        };
    }
    
    openMenu(menus) {
        this.menus=menus;
        this.setState({
            isOpen: true,
        });
    }

    closeMenu() {
        this.setState({
            isOpen: false,
        });
    }

    menuPressed(menuType) {
        this.props.onMenuPress && this.props.onMenuPress(menuType);
        this.setState({
            isOpen: false,
        });
    }

    getOtherMenuItem() {
        let menuItems = [];
        for (let i = 0;i < this.menus.length;i++) {
            menuItems.push(
                <TouchableOpacity style={styles.menuitem} onPress={() => {this.menuPressed(this.menus[i])}}>
                    <Text style={styles.menuitemtext}>
                        {this.menus[i]}
                    </Text>
                </TouchableOpacity>
            );

            if (i < this.menus.length - 1) {
                menuItems.push(
                    <View style={styles.menusplitter} />
                );
            }
        }

        return menuItems;
    }
    
    render() {
        return (
            <Modal isOpen={this.state.isOpen} backdropPressToClose={true}>
                <View style={styles.container}>
                    <View style={styles.menucontainer1}>
                        {
                            this.getOtherMenuItem()
                        }
                    </View>
                    <View style={styles.menucontainer2}>
                        <TouchableOpacity style={styles.menuitem} onPress={() => {this.closeMenu()}}>
                            <Text style={[styles.menuitemtext,{color:'red'}]}>
                                {UIConstants.login.alert_cancel}
                            </Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </Modal>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        width: WINDOW_WIDTH,
        height: WINDOW_HEIGHT,
        alignItems: 'center',
        flexDirection: 'column',
        justifyContent: 'flex-end',
    },
    menucontainer1: {
        borderRadius: 8,
        backgroundColor: Colors.soiMenuModalBackground,
        width:WINDOW_WIDTH-30,
        marginBottom: 8,
    },
    menucontainer2: {
        borderRadius: 8,
        backgroundColor: Colors.soiMenuModalBackground,
        width:WINDOW_WIDTH-30,
        marginBottom: 10,
    },
    menuitem: {
        height:50,
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center',
    },
    menuitemtext: {
        fontSize:FontSizes.soiMenuModalItem,
        color:Colors.soiMenuModalItem,
        textAlign:'center',
    },
    menusplitter: {
        borderBottomWidth:FontSizes.spliterWidth,
        borderBottomColor:Colors.soiMenuModalSpliter,
    },
});

export default MenuModal;